{# /StudX_dir/StudX/configuration/templates/configuration/classes_list.html #}

{% extends 'dashboard_base.html' %}
{% load static i18n %}

{% block title %}Classes {% endblock %}

{% block content %}



<div class="container">
	<div class="card">  
		<nav class="navbar navbar-light bg-light justify-content-between">
			<div class="btn-group" role="group" aria-label="First group">
				<button type="button" class="btn btn-sm btn-outline-secondary" disabled>Total: {{ classes_obj_list|length }}</button>
			</div>

			<div class="btn-group float-right" role="group">
				<a class="btn btn-secondary btn-sm" href="#"><i class="fa fa-plus" aria-hidden="true"></i></a>
				<a class="btn btn-secondary btn-sm" href="#"><i class="fas fa-flag"></i></a>
			</div>
		</nav>
		<div class="card-body"> 
			<div class="container">
				
				<div class="row">
					<div class="col"><strong>{% trans 'Classe' %}</strong></div>
					<div class="col"><strong>{% trans '# Students' %}</strong></div>
					<div class="col"><strong>{% trans 'Responsible(s)' %}</strong></div>
					<div class="col"><strong>Action(s)</strong></div>
				</div>
					
				{% for classe in classes_obj_list %}
				<div class="row border-top" >
					<div class="col">{{ classe }}</div>
					<div class="col">{{ classe.student_classe.all.count }}</div>
					<div class="col">
						{% for user in classe.owner_classe.all %}
							<a href="#"><span class="badge badge-info">{{ user.username }}</span></a>
						{% endfor %}
					</div>
					<div class="col">
						<div class="btn-group btn-group-sm" role="group" aria-label="actions">
							<button type="button" data-toggle="collapse" class="btn btn-outline-info btn-sm" data-target="#collapseClasseRow{{ classe }}">
							<i class="fas fa-eye"></i>
							</button>
							<a class="btn btn-outline-info btn-sm" href="{% url 'configuration:getSchedule' classe  %}"><i class="far fa-clock"></i></a>
							{% if perms.configuration.change_classes %}
								<a class="btn btn-outline-info btn-sm" href="#"><i class="fas fa-pencil-alt"></i> </a>
							{% endif %}
							{% if perms.configuration.delete_classes %}
								<a class="btn btn-outline-info btn-sm" data-toggle="modal" data-target="#AllClassesDeleteModal" href=""><i class="fas fa-trash-alt"></i> </a>
							{% endif %}
						</div>
					</div>
				</div>

				<div id="collapseClasseRow{{ classe }}" class="row-fluid collapse">
					<div class="col"></div>
					<div class="col">
						{% for student in classe.student_classe.all %}
						<div class="d-flex align-items-center">
							<div class="avatar mr-2 my-2">
							{% if student.picture %}
								<img class="img-avatar" src="/student{{ student.picture.url }}" alt="{{ student.fname }} {{ student.lname }}">
							{% else %}
								<img class="rounded-circle mx-auto d-block" height="100" width="100" src="/student/images/profile/default_user.jpeg" alt="default_img"/>
						   {% endif %}
							</div>
							<a href="{% url 'student:view_student' student.uuid %}"> {{ student.fname }} {{ student.lname }}</a></br>
						</div>
						{% endfor %}
					</div>
				</div>

			
			{% endfor %}
			</div>
		</div>
	</div>
</div>

{% endblock %}